<template>
  <div class="centers">
    <div class="conters">
      <div class="cardHeader_backBox m_hoverCP marBottom">
        <img
          class="cardHeader_icon m_hoverCP"
          src="@assets/img/img28.png"
          alt=""
          @click="onBack"
        />
        <span class="m_hoverCP" @click="onBack">{{
          $t("message.Return")
        }}</span>
      </div>
      <div class="tabBox marBottom">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-model-item :label="$t('message.Product_name')">
                  <a-select
                    v-model="queryParam.productId"
                    :placeholder="$t('message.Please_select')"
                    show-search
                    :disabled='disable'
                    :filter-option="filterOption"
                    @change="onChangeNumeratorUnitId"
                    style="width: 100%"
                  >
                    <a-select-option
                      :value="item.id"
                      v-for="(item, index) in productData"
                      :key="index"
                    >
                      {{ item.productName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item :label="$t('message.Product_accounting')">
                  <a-select
                    v-model="queryParam.calculateId"
                    :placeholder="$t('message.Please_select')"
                    show-search
                    :disabled='disable'
                    :filter-option="filterOption"
                    @change="onChangeNumer"
                    style="width: 100%"
                  >
                    <a-select-option
                      :value="item.id"
                      :disabled='!item.isSelected'
                      v-for="(item, index) in calculateData"
                      :key="index"
                    >
                      {{ item.batchNumber }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="6"> </a-col>
              <a-col :span="6"> </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <!-- 概况 -->
      <div class="gaikuao marBottom" >
        <div class="title">{{ $t("message.Basic_product_information") }}</div>
        <div class="marBottom" style="display: flex; gap: 24px">
          <div class="flexOne">
            <div class="text marBom"><span class="red">*</span>{{$t("message.Product_image") }}</div>
            <div class="flex">
              <j-image-upload
                v-if="list.productPic"
                class="avatar-uploader"
                :text="$t('message.Click_Upload_File')"
                v-model="list.productPic"
              ></j-image-upload>
              <img class="image" :src="list.productPic" alt="" v-else/>
            </div>
          </div>
          <div class="flexOne">
            <div class="text marBom"><span class="red">*</span>{{$t("message.Process_flow_chart") }}</div>
            <div class="flex">
              <j-image-upload
                v-if="liWt.flowChart"
                class="avatar-uploader"
                :text="$t('message.Click_Upload_File')"
                v-model="liWt.flowChart"
              ></j-image-upload>
              <img class="image" :src="liWt.flowChart.split(',')" alt="" v-else/>
            </div>
          </div>
        </div>
        <div class="marBottom flex">
          <div class="flex widths">
            <div class="leftText">{{ $t("message.Product_name") }}:</div>
            <div class="rightText">{{ list.productName }}</div>
          </div>
          <div class="flex widths">
            <div class="leftText">
              {{ $t("message.Specifications_and_models") }}：
            </div>
            <div class="rightText">{{ list.productSpecification }}</div>
          </div>
          <div class="flex widths">
            <div class="leftText">{{ $t("message.Unit") }}:</div>
            <div class="rightText">{{ list.productUnitName }}</div>
          </div>
          <div class="flex widths">
            <div class="leftText">{{ $t("message.Product_weight") }}:</div>
            <div class="rightText">{{ list.productWeight }}{{list.productWeightUnit}}</div>
          </div>
        </div>
        <div class="marBottom flex">
          <div class="flex widths">
            <div class="leftText">{{ $t("message.Accounting_boundary") }}:</div>
            <div class="rightText">
              {{
                liWt.lifeCycleType == 1
                  ? $t("message.From_cradle_to_gate")
                  : liWt.lifeCycleType == 2
                  ? $t("message.From_cradle_to_grave")
                  : liWt.lifeCycleType == 3
                  ? $t("message.Customize")
                  : ""
              }}
            </div>
          </div>
          <div class="flex widths">
            <div class="leftText">
              {{ $t("message.Accounting_quantity") }}：
            </div>
            <div class="rightText">{{ liWt.calculateNumber }}</div>
          </div>
          <div class="flex widths">
            <div class="leftText">{{ $t("message.accounting_cycle") }}:</div>
            <div class="rightText">{{ liWt.beginTime }}-{{ liWt.endTime }}</div>
          </div>
          <div class="flex widths">
            <div class="leftText">
              {{ $t("message.Product_carbon_footprint") }}:
            </div>
            <div class="rightText">{{ liWt.totalCarbonEmission }}kgCO₂e</div>
          </div>
        </div>
        <div class="marBottom">
          <div class="flex">
            <div class="leftText">
              {{ $t("message.Product_Introduction") }}:
            </div>
            <div class="rightText">
              {{ list.productIntroduction ? list.productIntroduction : "" }}
            </div>
          </div>
        </div>
      </div>
      <!--  碳足迹认证书 -->
      <div class="gaikuao marBottom">
        <div class="title">
          {{ $t("message.Carbon_footprint_certification") }}
        </div>
        <div class="marBottom">
          <div class="flexOne">
            <div class="flex">
              <j-image-upload
                class="avatar-uploader"
                :text="$t('message.upload_attachment')"
                v-model="queryParam.certificate"
              ></j-image-upload>
            </div>
          </div>
          <div class="tishiText">
            {{
              $t(
                "message.Only_pdf_png_jpg_and_peg_formats_are_supported_for_upload_with_a_maximum_of_one_file_The_size_of_each_file_should_not_exceed_5M"
              )
            }}
          </div>
        </div>
      </div>
      <!--  H5信息 -->
      <div class="gaikuao marBottom">
        <div class="title">
          {{ $t("message.H5_Information") }}
        </div>
        <div class="marBottom">
          <div class="flex" style="gap: 172px">
            <!-- <div class="flexOne">
              <div class="text marBom">{{ $t("message.Company_Profile") }}</div>
              <textarea
                class="textarea flexOne"
                v-model="queryParam.orgContent"
                name=""
                id=""
                cols="30"
                rows="10"
              ></textarea>
            </div> -->
            <div class="flexOne">
              <div class="text marBom"><span class="red">*</span>{{ $t("message.Label_LOGO") }}</div>
              <j-image-upload
                class="avatar-uploader"
                :text="$t('message.upload_attachment')"
                v-model="queryParam.labelImg"
              ></j-image-upload>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="button">
      <div class="boots" @click="onSubime" v-if="type == 1||type==3">
        {{ $t("message.Confirm_the_generation") }}
      </div>
      <div class="boots" @click="onSubimeUpdata" v-else>
        {{ $t("message.Regenerate") }}
      </div>
    </div>
  </div>
</template>

<script>
import { cloneObject } from "@/utils/util";
import { deleteAction, getAction, postAction } from "@/api/manage";
export default {
  name: "moduleIndex",
  data() {
    return {
      queryParam: {
        certificate: "",
        labelImg: "",
      },
      type: 1,
      productData: [],
      calculateData: [],
      list: {
        productPic:''
      },
      liWt: {
        flowChart:''
      },
      disable:false,
    };
  },
  created() {},
  mounted() {
  },
  methods: {
    /**
     * 下拉框数据过滤
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * 返回
     */
    onBack() {
      this.$emit("back");
    },
    onChangeNumeratorUnitId(e) {
      let arr = 0;
      arr = this.productData.findIndex(
        (item) => item.id == this.queryParam.productId
      );
      console.log(this.productData[arr],'this.list');
      if(arr!=-1){
        this.list = this.productData[arr];
      }
      this.getFinishCalculateList(1);
    },
    onChangeNumer(e) {
      console.log(this.queryParam);
      let arr = 0;
      arr = this.calculateData.findIndex(
        (item) => item.id == this.queryParam.calculateId
      );
      if(arr!=-1){
        this.liWt = this.calculateData[arr];
      }
      console.log(this.liWt);
    },
    //产品列表
    getProductList(value) {
      getAction("/footprintProduct/cyFootprintProduct/getProductList").then(
        (res) => {
          if (res.success) {
            this.productData = res.result;
            if(value==1){
              this.onChangeNumeratorUnitId()
            }
          }
        }
      );
    },
    //编辑
    getUpdate(){
      this.getProductList(1)
    },
    //产品核算列表
    getFinishCalculateList(value) {
      getAction("/footprintProduct/cyFootprintProduct/getFinishCalculateList", {
        productId: this.queryParam.productId,
      }).then((res) => {
        if (res.success) {
          this.calculateData = res.result;
          if(value==1&&(this.type==2||this.type==3)){
              this.onChangeNumer()
            }
        }
      });
    },
    //新建
    onSubime() {
      if (!this.queryParam.labelImg) {
        this.$message.error(this.$t("message.Please_upload_pictures"));
        return;
      }
      postAction(
        "/footprintProduct/cyFootprintProductCalculateLabel/applyLabel",
        this.queryParam
      ).then((res) => {
        if (res.success) {
          this.$message.success(this.$t("message.operation_success"));
          this.$emit("back");
        }else{
          this.$message.error(res.message);
        }
      });
    },
    //编辑
    onSubimeUpdata() {
      if (!this.queryParam.labelImg) {
        this.$message.success(this.$t("message.Please_upload_pictures"));
        return;
      }
      postAction(
        "/footprintProduct/cyFootprintProductCalculateLabel/editLabel",
        this.queryParam
      ).then((res) => {
        if (res.success) {
          this.$message.success(this.$t("message.operation_success"));
          this.$emit("back");
        }
      });
    },
  },
};
</script>
<style scoped>
</style>

<style lang="less" scoped>
/deep/ .ant-upload-list{
  display: flex;
}
.avatar-uploader {
  display: block;
  width: 120px;
  height: 120px;
  /deep/.ant-upload {
    width: 120px !important;
    height: 120px !important;
  }

  /deep/.ant-upload-text {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
  }
}
.tishiText {
  font-weight: 400;
  font-size: 12px;
  color: #888888;
  margin-top: 24px;
}
.widths {
  width: 25%;
}
.leftText {
  font-weight: 400;
  font-size: 14px;
  color: #888888;
}
.rightText {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
.tabBox {
  padding: 24px 24px 0;
  background: #ffffff;
  border-radius: 3px;
}
.button {
  width: 100%;
  height: 80px;
  margin-top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  .boots {
    background: #148958;
    border-radius: 3px 3px 3px 3px;
    font-weight: 400;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    padding: 9px 29px;
    cursor: pointer;
  }
}
.widrhts {
  width: 50%;
  margin-bottom: 16px;
}
.warp {
  display: flex;
  flex-wrap: wrap;
}
.input {
  width: 100%;
  height: 32px;
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #dcdcdc;
  padding-left: 8px;
}
.img2 {
  width: 18px;
  height: 18px;
  margin-left: 12px;
}

&:focus-visible {
  outline: 0px;
}

.length {
  font-weight: 400;
  font-size: 12px;
  color: #888888;
  position: absolute;
  right: 8px;
  bottom: 10px;
}
.textarea {
  width: 100%;
  height: 119px;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  color: #333333;
  resize: none;
}
.textarea1 {
  width: 100%;
  height: 54px;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  color: #333333;
  resize: none;
}

.textarea2 {
  width: 100%;
  height: 64px;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  color: #333333;
  resize: none;
}
.fily {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.marBottom {
  margin-bottom: 24px;
}
.marBottom1 {
}
.image {
  width: 120px;
  height: 120px;
  background: #f3f3f3;
  border-radius: 0px 0px 0px 0px;
  .img {
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
  }
  div {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
  }
}
.flexOne {
  flex: 1;
}
.conters {
  padding: 24px 339px;
  .red {
    color: red;
  }
  .marBom {
    margin-bottom: 11px;
  }
  .text {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
  .gaikuao {
    background: #ffffff;
    padding: 25px 24px;
  }
  .title {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    margin-bottom: 16px;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.border {
  font-weight: 400;
  font-size: 14px;
  color: #148958 !important;
  border-bottom: 3px solid #148958;
}
.amar {
  margin-left: 315px;
}
.table {
  width: 207px;
  padding: 20px 0;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  justify-content: center;
  color: rgba(0, 0, 0, 0.6);
}
.cardHeader {
  position: relative;
  display: flex;
  align-items: center;
  // justify-content: center;
  gap: 16px;
  width: 100%;
  height: 64px;
  background: #ffffff;
}

.cardHeader_backBox {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}

.cardHeader_icon {
  width: 16px;
  height: 16px;
}

.cardHeader_numBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
}

.cardHeader_numBox_active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #148958;
  border: 1px solid #148958;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.cardHeader_numBox_end {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #148958;

  img {
    width: 16px;
    height: 16px;
  }
}

.cardHeader_textBox {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
}

.cardHeader_textBox_active {
  color: #148958;
}

.cardHeader_hrBox {
  width: 344px;
  height: 2px;
  background: #dcdcdc;
}

.cardHeader_hrBox_active {
  background: #148958;
}
</style>